<html>
  <head>
    <meta name="author" content="web_server.py">

    <style>


.warning {
    z-index: 2;
    margin-top: 100px;
    width: 100%;
    position: fixed;
    top: 50%;
    text-align: center;
    padding: 10px;
    box-shadow: 0px 0px 5px 0px black;
    transform: rotate(3deg) scale(1.1);
    background: linear-gradient(
        100deg,
        #fcba03 0%,
        #fcba03 10%,
        #364052 10.5%,
        #364052 20%,
        #fcba03 20.5%,
        #fcba03 30%,
        #364052 30.5%,
        #364052 40%,
        #fcba03 40.5%,
        #fcba03 50%,
        #364052 50.5%,
        #364052 60%,
        #fcba03 60.5%,
        #fcba03 70%,
        #364052 70.5%,
        #364052 80%,
        #fcba03 80.5%,
        #fcba03 90%,
        #364052 90.5%,
        #364052 100%
    );
}

.warning > p {
    font-size: 30px;
    font-weight: bold;
    color: #ada09e;
    background: white;
    margin: 10px;
    padding: 5px;
    border-radius: 3px;
    display: inline;
}

#background {
    z-index: -1;
    width: 100%;
    filter: blur(3px) sepia(5) hue-rotate(15deg) brightness(1.3);
    position: fixed;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
}

#header {
    background-color: rgba(244, 255, 255, 0.8);
    margin: -8px -8px 0px -8px;
    border: solid black;
    border-width: 0 0 1px 0;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
}

#title {
    // float: left;
    width: 50%;
    display: inline-block;
    margin-right: 10px;

    padding-top: 60px;
    padding-bottom: 30px;
    text-align: right;
    font-size: 48px;
    font-family: Helvetica;
    font-weight: lighter;
}

#links {
    // float: left;
    width: 50%;
    display: inline;
    margin-left: 10px;
}

#links > a {
    display: inline;
    font-size: 30px;
    margin-right: 3%;

    color: #10a11e;
    text-decoration: none;

    transition: 0.3s;
}
#links > a:hover {
    color: #5ae067;
    text-decoration: none;
}

#content {
    width: 80%;
    background-color: rgba(244, 255, 255, 0.8);
    height: 800px;
    margin: auto;
    padding: 40px;
    border: solid black;
    border-width: 0 1px 1px 1px;
}

#body {
    font-family: Helvetica;
    font-size: 1.2em;
    color: #051122;
}

    </style>

  </head>

  <body>
    <div id="header">
      <div id="title">
        Swedish State Archive
      </div>
      <div id="links">
        <a href="https://youtu.be/U-g8y4fCSzg">Contact</a>
        <a href="https://youtu.be/O4NH8mxmypo">Search</a>
        <a href="https://youtu.be/4BO2140NPCU">Languages</a>
        <a href="https://youtu.be/awg9EbBo4mc">Other</a>
      </div>
    </div>
    <div id="body">
      <div id="content">
        <h2> Operation </h2>
        <p> Swedish State Archives has supervisory responsibility for the City of Stockholm's administrations, companies and foundations. Here the church archives and archives are kept, for example, by the activities of the courts, the police and the customs. The archive must ensure that the archives law is followed and that a good public structure is maintained. Today, digitization of paper documents and the management of digitally created documents is one of the most important tasks of the Swedish State Archive. Preservation and binding of older documents takes place as needed and is part of the archive's work to ensure that the city's information is preserved for the future.
 </p>
      </div>
    </div>
    <br />
    <img id="background" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Stadsarkivet_Liljeholmskajen%2C_2019.jpg/1024px-Stadsarkivet_Liljeholmskajen%2C_2019.jpg">
    <div class="warning"> <p> This site is under construction! </p> </div>
  </body>
</html>
